<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
	<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
	<link rel="stylesheet" href="${CPATH}/static/rbh/css/index.css">
	<!--<link rel="stylesheet" href="css/jquery.zySlide.css">-->

	<title>软博会交易平台</title>
</head>
<body>
<section class="left">
	<!-- 交易／供需信息数 -->
	<div class="tradenum">
		<span id="tradenum"></span>
	</div>
	<!-- 用户咨询量折线图 -->
	<div class="consult">
		<ul class="consult-label tab">
			<li class="current" data-day="D1">D1</li>
			<li data-day="D2">D2</li>
			<li data-day="D3">D3</li>
		</ul>
		<div class="consult-title">用户咨询量</div>
		<div class="consult-line" id="echart-line"></div>
	</div>
	<!-- 品牌企业 -->
	<div class="brand">
		<ul class="brand-list" id="brandList">
			<li><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/brand.jpg" alt="" width="200"></a></li>
			<li class="current"><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/brand2.jpg" alt="" width="200"></a></li>
			<li><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/brand3.jpg" alt="" width="200"></a></li>
			<li><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/brand.jpg" alt="" width="200"></a></li>
			<li><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/brand.jpg" alt="" width="200"></a></li>
			<li><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/brand.jpg" alt="" width="200"></a></li>
			<li><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/brand.jpg" alt="" width="200"></a></li>
			<li><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/brand.jpg" alt="" width="200"></a></li>
		</ul>
	</div>
	<!-- 商品 -->
	<div class="goods">
		<ul class="goods-list">
			<li>
				<span class="goods-logo"><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/logo.jpg" alt=""></a></span>
				<span class="goods-name">全程CRM客户关系</span>
				<span class="goods-price">￥ 320.00</span>
			</li>
			<li>
				<span class="goods-logo"><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/logo.jpg" alt=""></a></span>
				<span class="goods-name">全程CRM客户关系</span>
				<span class="goods-price">￥ 320.00</span>
			</li>
			<li>
				<span class="goods-logo"><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/logo.jpg" alt=""></a></span>
				<span class="goods-name">全程CRM客户关系</span>
				<span class="goods-price">￥ 320.00</span>
			</li>
			<li>
				<span class="goods-logo"><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/logo.jpg" alt=""></a></span>
				<span class="goods-name">全程CRM客户关系</span>
				<span class="goods-price">￥ 320.00</span>
			</li>
		</ul>

		<ul class="goods-list">
			<li>
				<span class="goods-logo"><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/logo.jpg" alt=""></a></span>
				<span class="goods-name">全程CRM客户关系</span>
				<span class="goods-price">￥ 320.00</span>
			</li>
			<li>
				<span class="goods-logo"><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/logo.jpg" alt=""></a></span>
				<span class="goods-name">全程CRM客户关系</span>
				<span class="goods-price">￥ 320.00</span>
			</li>
			<li>
				<span class="goods-logo"><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/logo.jpg" alt=""></a></span>
				<span class="goods-name">全程CRM客户关系</span>
				<span class="goods-price">￥ 320.00</span>
			</li>
			<li>
				<span class="goods-logo"><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/logo.jpg" alt=""></a></span>
				<span class="goods-name">全程CRM客户关系</span>
				<span class="goods-price">￥ 320.00</span>
			</li>
		</ul>
		<ul class="goods-list">
			<li>
				<span class="goods-logo"><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/logo.jpg" alt=""></a></span>
				<span class="goods-name">全程CRM客户关系</span>
				<span class="goods-price">￥ 320.00</span>
			</li>
			<li>
				<span class="goods-logo"><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/logo.jpg" alt=""></a></span>
				<span class="goods-name">全程CRM客户关系</span>
				<span class="goods-price">￥ 321.00</span>
			</li>
			<li>
				<span class="goods-logo"><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/logo.jpg" alt=""></a></span>
				<span class="goods-name">全程CRM客户关系</span>
				<span class="goods-price">￥ 320.00</span>
			</li>
			<li>
				<span class="goods-logo"><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/logo.jpg" alt=""></a></span>
				<span class="goods-name">全程CRM客户关系</span>
				<span class="goods-price">￥ 320.00</span>
			</li>
		</ul>
		<ul class="goods-list">
			<li>
				<span class="goods-logo"><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/logo.jpg" alt=""></a></span>
				<span class="goods-name">全程CRM客户关系</span>
				<span class="goods-price">￥ 320.00</span>
			</li>
			<li>
				<span class="goods-logo"><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/logo.jpg" alt=""></a></span>
				<span class="goods-name">全程CRM客户关系</span>
				<span class="goods-price">￥ 322.00</span>
			</li>
			<li>
				<span class="goods-logo"><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/logo.jpg" alt=""></a></span>
				<span class="goods-name">全程CRM客户关系</span>
				<span class="goods-price">￥ 320.00</span>
			</li>
			<li>
				<span class="goods-logo"><a href="${CPATH}/data/bigIndex" target="_blank"><img src="${CPATH}/static/rbh/images/logo.jpg" alt=""></a></span>
				<span class="goods-name">全程CRM客户关系</span>
				<span class="goods-price">￥ 320.00</span>
			</li>
		</ul>
	</div>
	<div class="num" id="num">
      <span class="num-bar supply">
        <span class="num-bar-total fn-left"></span>
        <span class="num-bar-progress"></span>
        <span class="num-bar-label"></span>
      </span>
		<span class="num-bar need">
        <span class="num-bar-total fn-right"></span>
        <span class="num-bar-progress"></span>
        <span class="num-bar-label"></span>
      </span>
	</div>
</section>
<section class="middle">
	<div class="time">
		<span id="nowTime">2017年6月29日 10 ：24 ：12</span>
	</div>
	<div class="middle-carouse">
		<div id="carousel" class="carousel">
			<div class="carousel-inner">
				<ul class="carousel-inner-wrap fn-clear">
					<li class="carousel-inner-wrap-cell">
						<img src="${CPATH}/static/rbh/img/main1.png">
					</li>
					<li class="carousel-inner-wrap-cell">
						<img src="${CPATH}/static/rbh/img/main2.jpg">
					</li>
					<li class="carousel-inner-wrap-cell">
						<img src="${CPATH}/static/rbh/img/main3.png">
					</li>
					<li class="carousel-inner-wrap-cell">
						<img src="${CPATH}/static/rbh/img/main2.jpg">
					</li>
					<li class="carousel-inner-wrap-cell">
						<img src="${CPATH}/static/rbh/img/main3.png">
					</li>
				</ul>
			</div>
			<div class="carousel-dot"><span class="selected"></span><span></span><span></span><span></span><span></span></div>
		</div>
	</div>
	<div class="tradevenue">
		<div class="tradevenue-bar tradevenu-bar1" id="echart-bar1"></div>
		<div class="tradevenue-bar tradevenu-bar2" id="echart-bar2"></div>
	</div>
</section>
<section class="right">
	<div class="tradeaccount">
		<span id="tradeaccount"></span>
	</div>
	<div class="message">
		<ul class="message-tab tab">
			<li class="current" data-panel="supply">供需信息</li>
			<li data-panel="channel">渠道信息</li>
		</ul>
		<ul class="list message-list" id="messageList">
		</ul>
	</div>
	<div class="news">
		<h2 class="news-title">新闻动态</h2>
		<ul class="list news-list" id="newsList">
		</ul>
	</div>
	<div class="mapvenue">
		<div class="mapvenue-adv">
			<span>第二十一届中国国际软件博览会</span>
		</div>
		<div class="mapvenue-cube">
			<div class="cube cube-move cube1 current" data-layer="layer1">
				<div class="cube-face cube-top"></div>
				<div class="cube-face cube-left"></div>
				<div class="cube-face cube-right"></div>
				<div class="cube-face cube-front">
					<span class="cube-face-title">软件与商业馆</span>
					<span class="cube-face-location"><#if summary??>${summary.hall0?substring(summary.hall0?last_index_of("/")+1,summary.hall0?length)}</#if><img src="${CPATH}/static/rbh/images/location.png" alt=""></span>
				</div>
			</div>
			<div class="cube cube2">
				<div class="cube-face cube-top"></div>
				<div class="cube-face cube-left"></div>
				<div class="cube-face cube-right"></div>
				<div class="cube-face cube-front">
					<span class="cube-face-title">开幕式／主论坛</span>
					<span class="cube-face-location">88<img src="${CPATH}/static/rbh/images/location.png" alt=""></span>
				</div>
			</div>
			<div class="cube cube-move cube3" data-layer="layer3">
				<div class="cube-face cube-top"></div>
				<div class="cube-face cube-left"></div>
				<div class="cube-face cube-right"></div>
				<div class="cube-face cube-front">
					<span class="cube-face-title">软件综合馆</span>
					<span class="cube-face-location"><#if summary??>${summary.hall1?substring(summary.hall1?last_index_of("/")+1,summary.hall1?length)}</#if><img src="${CPATH}/static/rbh/images/location.png" alt=""></span>
				</div>
			</div>
			<div class="cube cube-move cube4" data-layer="layer4">
				<div class="cube-face cube-top"></div>
				<div class="cube-face cube-left"></div>
				<div class="cube-face cube-right"></div>
				<div class="cube-face cube-front">
					<span class="cube-face-title">软件与智能制造馆</span>
					<span class="cube-face-location"><#if summary??>${summary.hall3?substring(summary.hall3?last_index_of("/")+1,summary.hall3?length)}</#if><img src="${CPATH}/static/rbh/images/location.png" alt=""></span>
				</div>
			</div>
			<div class="cube cube-move cube5" data-layer="layer5">
				<div class="cube-face cube-top"></div>
				<div class="cube-face cube-left"></div>
				<div class="cube-face cube-right"></div>
				<div class="cube-face cube-front">
					<span class="cube-face-title">软件与生活馆</span>
					<span class="cube-face-location"><#if summary??>${summary.hall2?substring(summary.hall2?last_index_of("/")+1,summary.hall2?length)}</#if><img src="${CPATH}/static/rbh/images/location.png" alt=""></span>
				</div>
			</div>
			<div class="cube cube6">
				<div class="cube-face cube-top"></div>
				<div class="cube-face cube-left"></div>
				<div class="cube-face cube-right"></div>
				<div class="cube-face cube-front">
					<span class="cube-face-title">国家成果汇报馆</span>
					<span class="cube-face-location"><#if summary??>${summary.hall4?substring(summary.hall4?last_index_of("/")+1,summary.hall4?length)}</#if><img src="${CPATH}/static/rbh/images/location.png" alt=""></span>
				</div>
			</div>
			<div class="cube cube-move cube7" data-layer="layer7">
				<div class="cube-face cube-top"></div>
				<div class="cube-face cube-left"></div>
				<div class="cube-face cube-right"></div>
				<div class="cube-face cube-front">
					<span class="cube-face-title">软件与未来馆</span>
					<span class="cube-face-location "><#if summary??>${summary.hall4?substring(summary.hall4?last_index_of("/")+1,summary.hall4?length)}</#if><img src="${CPATH}/static/rbh/images/location.png" alt=""></span>
				</div>
			</div>
		</div>
		<div class="mapvenue-rank progress">
			<div class="progress-title">交易排行</div>
			<ul class="progress-list" id="rankList">
				<#if tradeList??>
					<#list tradeList as bean>
						<li class="current">
							<span class="progress-list-tab">0${tradeList_index!+1} <#if hallMap??>${hallMap[bean.hall]}</#if></span>
							<span class="progress-list-cube">
						<span class="sel"></span> <span class="sel"></span> <span></span> <span></span> <span></span>
						<span></span> <span></span> <span></span> <span></span> <span></span>
					</span>
							<span class="progress-list-num">${bean.trade_num!}万</span>
						</li>
					</#list>
				</#if>
			</ul>
		</div>
		<div class="mapvenue-num progress">
			<div class="progress-title">产品数和厂商数</div>
			<ul class="progress-list">
				<#if hallMap?? && summary??>
					<li class="current">
						<span class="progress-list-tab">${hallMap['0']}</span>
						<span class="progress-list-bars">
						  <span class="progress-list-bars-pro"></span>
						  <span class="progress-list-bars-fac"></span>
						</span>
						<span class="progress-list-num">${summary.hall0?substring(0,summary.hall0?last_index_of("/"))}</span>
					</li>
					<li>
						<span class="progress-list-tab">${hallMap['1']}</span>
						<span class="progress-list-bars">
						  <span class="progress-list-bars-pro"></span>
						  <span class="progress-list-bars-fac"></span>
						</span>
						<span class="progress-list-num">${summary.hall1?substring(0,summary.hall1?last_index_of("/"))}</span>
					</li>
					<li>
						<span class="progress-list-tab">${hallMap['2']}</span>
						<span class="progress-list-bars">
						  <span class="progress-list-bars-pro"></span>
						  <span class="progress-list-bars-fac"></span>
						</span>
						<span class="progress-list-num">${summary.hall2?substring(0,summary.hall2?last_index_of("/"))}</span>
					</li>
					<li>
						<span class="progress-list-tab">${hallMap['3']}</span>
						<span class="progress-list-bars">
						  <span class="progress-list-bars-pro"></span>
						  <span class="progress-list-bars-fac"></span>
						</span>
						<span class="progress-list-num">${summary.hall3?substring(0,summary.hall3?last_index_of("/"))}</span>
					</li>
					<li>
						<span class="progress-list-tab">${hallMap['4']}</span>
						<span class="progress-list-bars">
						  <span class="progress-list-bars-pro"></span>
						  <span class="progress-list-bars-fac"></span>
						</span>
						<span class="progress-list-num">${summary.hall4?substring(0,summary.hall4?last_index_of("/"))}</span>
					</li>
				</#if>
			</ul>
		</div>
		<div class="mapvenue-account">
			<div class="mapvenue-account-title">招投标交易额</div>
			<div class="mapvenue-account-cube">
				<span></span><span></span><span></span><span></span><span></span>
				<span></span><span></span><span></span><span></span><span></span>
				<span></span><span></span><span></span><span></span><span></span>
				<span></span><span class="sel"><i class="sel-label">
            <img src="${CPATH}/static/rbh/images/arrow.png" alt=""><#if summary??>${(summary.trade_num)}万</#if></img></span><span class="sel"></span><span class="sel"></span><span class="sel"></span>
			</div>
		</div>
	</div>
</section>
<div class="layer fn-hide">
	<img class="layer1 fn-hide" src="${CPATH}/static/rbh/images/cube1-layer.png" alt="">
	<img class="layer3 fn-hide" src="${CPATH}/static/rbh/images/cube3-layer.png" alt="">
	<img class="layer4 fn-hide" src="${CPATH}/static/rbh/images/cube4-layer.png" alt="">
	<img class="layer5 fn-hide" src="${CPATH}/static/rbh/images/cube5-layer.png" alt="">
	<img class="layer7 fn-hide" src="${CPATH}/static/rbh/images/cube7-layer.png" alt="">
</div>
<script src="${CPATH}/static/rbh/js/zepto.js"></script>
<script src="${CPATH}/static/rbh/js/jquery.min.js"></script>
<script src="${CPATH}/static/rbh/js/jquery.zySlide.js"></script>
<script src="${CPATH}/static/rbh/js/echarts.min.js"></script>
<script src="${CPATH}/static/rbh/js/carousel.js"></script>
<script src="${CPATH}/static/rbh/js/vm-carousel.js"></script>
<script src="${CPATH}/static/rbh/data/data.js"></script>
<script>

    var cpath = '${CPATH}';

    lineData = ${(lineData)};
    bar1 = ${(bar1)};
    bar2 = ${(bar2)};
    tradeaccount = ${(tradeaccount!)};
    tradenum = ${(tradenum!)};
    num = ${(num!)};

    var setSupply = true;
    refreshData();
    function refreshData() {
        $.getJSON("${(CPATH)}/data/refreshData?_req="+new Date(),function (data) {
            var json = $.parseJSON(data.data);
//			lineData = $.parseJSON(json.lineData);
            bar1 = $.parseJSON(json.bar1);
            bar2 = $.parseJSON(json.bar2);
            tradeaccount = json.tradeaccount;
            tradenum = json.tradenum;
            num = $.parseJSON(json.num);
            $('#tradeaccount').html(json.summary.rightNum);
            $('#tradenum').html(json.summary.leftNum);

            var numObj = num;
            var supplyPer = numObj.supply/100 + '%';
            var needPer = numObj.need/100 + '%';
            $("#num .num-bar-total").html(numObj.total);
            $("#num .supply .num-bar-progress").css("width", supplyPer);
            $("#num .supply .num-bar-label").html(numObj.supply);
            $("#num .supply .num-bar-label").css("right", supplyPer);
            $("#num .need .num-bar-progress").css("width", needPer);
            $("#num .need .num-bar-label").html(numObj.need);
            $("#num .need .num-bar-label").css("left",needPer);

            messageData = $.parseJSON(json.message);
            if (setSupply) {
                $('#messageList').html(setMessage(messageData.supply));
                setSupply = false;
            }
            $('#newsList').html(setMessage(messageData.news));
        });
        setTimeout(refreshData,2000);
    }

    $.noConflict()
    $('.tab li').on('click', function () {
        $(this).addClass('current').siblings().removeClass('current')
    })


    var tradenum = tradenum;
    $('#tradenum').html(tradenum);

    var tradeaccount = tradeaccount;
    $('#tradeaccount').html(tradeaccount);

    var messageData = message;
    $('#messageList').html(setMessage(messageData.supply));

    var targetPanel = '';
    $('.message-tab li').on('click', function (){
        targetPanel = $(this).data('panel');
        $('#messageList').html(setMessage(messageData[targetPanel]));
    })

    var newsData = news;
    $('#newsList').html(setMessage(newsData.list));
    function setMessage(data) {
        var liStr = '';
        var item;

        for (var i=0; i < data.length; i++ ) {
            item = data[i];
            liStr += '<li><span class="no">' + item.time + '</span><span><a style="color: white;" href="' + cpath + item.url + '" target="_blank">' + item.title + '</a></span></li>'
        }
        return liStr;
    }


</script>
<script>
    var onlyone = true;
    window.onfocus = function() {
        if (onlyone) {
            setCarousel($('#carousel'));
            $("#carousel").focusImg({
                interval : 3000,
                speed: 2000
            });
        }
    };

    setCarousel($('#carousel'));

    $("#carousel").focusImg({
        interval : 3000,
        speed: 2000
    });

    function setCarousel ($target) {
        var htmlstr = '<div class="carousel-inner">'
            + '<ul class="carousel-inner-wrap fn-clear" style="margin-left: -40px;">'
            +	'<li class="carousel-inner-wrap-cell">'
            +		'<img src="${CPATH}/static/rbh/images/main1.png">'
            +	'</li>'
            +	'<li class="carousel-inner-wrap-cell">'
            +		'<img src="${CPATH}/static/rbh/images/main2.jpg">'
            +	'</li>'
            +	'<li class="carousel-inner-wrap-cell">'
            +		'<img src="${CPATH}/static/rbh/images/main3.png">'
            +	'</li>'
            +	'<li class="carousel-inner-wrap-cell">'
            +		'<img src="${CPATH}/static/rbh/images/main4.jpg">'
            +	'</li>'
            +	'<li class="carousel-inner-wrap-cell">'
            +		'<img src="${CPATH}/static/rbh/images/main5.png">'
            +	'</li>'
            + '</ul>'
            + '</div>'
            + '<div class="carousel-dot"><span class="selected"></span><span></span><span></span><span></span><span></span></div>';
        $target.html(htmlstr)
    }

    var $brandElem =  $('#brandList li');
    var brandLen = $brandElem.length;

    var stepi = 0;
    brandList();
    function brandList () {

        $("#brandList li").eq(stepi).removeClass('current');
        if (brandLen - stepi < 2) {
            stepi = 1;
        }
        $("#brandList").animate({
            'margin-left' : -134*stepi + 'px'
        }, 1000);
        stepi++;
        $("#brandList li").eq(stepi).addClass('current');
        setTimeout('brandList()', 3000);
    }
</script>
<script>
    var $gList = $('.goods-list');
    var curIndex = 0;
    var timer;

    fade();

    function fade() {
        timer = setTimeout(function() {
            $gList.eq(curIndex).removeClass('fn-hide');
            $gList.eq(curIndex).animate({
                opacity: 1
            }, 2000, 'ease', function(){
                $gList.eq(curIndex).animate({
                    opacity: 0
                }, 2000, 'ease', function(){
                    $gList.eq(curIndex).addClass('fn-hide');
                    curIndex ++;
                    if ($gList.size() === curIndex ) {
                        curIndex = 0;
                    }
                    clearTimeout(timer);
                    fade();
                })
            });
        }, 50);
    }

    var i =0;
    function loaction() {
        $('.cube-move.current').removeClass('current');
        if ( i > 4) {
            i = 0;
        }
        $('.cube-move').eq(i).addClass('current');
        i++;
    }

    var tmove = setInterval('loaction()', 3000)

    $('.cube-move').on('mouseenter',function () {
        clearInterval(tmove);
        $(this).addClass('current');
        $(this).siblings().removeClass('current');
    }).on('mouseleave', function () {
        tmove = setInterval('loaction()', 3000);
        $(this).removeClass('current');
    })

    var layerTarget = '';
    $('.cube-move').on('click', function () {
        layerTarget = $(this).data('layer');
        $('.'+layerTarget).removeClass('fn-hide');
        $('.layer').removeClass('fn-hide');
    });

    $('.layer').on('click', function () {
        $('.'+layerTarget).addClass('fn-hide');
        $(this).addClass('fn-hide');
    })
</script>
<!-- 用户咨询量折线图 -->
<script>
    $(function () {
        var echartLine = echarts.init($('#echart-line')[0])
        var option = {
            color: ['#e9081a', '#51cfcc', '#0d3eb7', '#0d3eb7', '#f9b01f'],
            title: {
                text: ''
            },
            textStyle: {
                color: '#7186a3'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['汇报馆','商业馆','生活馆','综合馆','智能制造馆'],
                bottom : '16px',
                textStyle : {
                    color: '#7186a3'
                }
            },
            grid: {
                left: '3%',
                rigth: '4%',
                top: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value',
                splitNumber: 4,
            },
            series: [
                {
                    name: '汇报馆',
                    type: 'line',
                    symbol: 'circle',
                    smooth: true,
                    data: []
                },
                {
                    name: '商业馆',
                    type: 'line',
                    symbol: 'circle',
                    smooth: true,
                    data: []
                },
                {
                    name: '生活馆',
                    type: 'line',
                    symbol: 'circle',
                    smooth: true,

                    data: []
                },
                {
                    name: '综合馆',
                    type: 'line',
                    symbol: 'circle',
                    smooth: true,
                    data: []
                },
                {
                    name: '智能制造馆',
                    type: 'line',
                    symbol: 'circle',
                    smooth: true,
                    data: []
                },
            ]
        }
        echartLine.setOption(option);

        var dataTarget = '';
        var liTarget = 'D1';
        var data = {
            "D1" : {
                "categories" : [],
                "report": [],
                "business": [],
                "life": [],
                "comprehensive": [],
                "intelligent": []
            },
            "D2": {
                "categories" : [],
                "report": [],
                "business": [],
                "life": [],
                "comprehensive": [],
                "intelligent": []
            },
            "D3": {
                "categories" : [],
                "report": [],
                "business": [],
                "life": [],
                "comprehensive": [],
                "intelligent": []
            }
        }

        refreshData();
        function refreshData() {
            if(lineData[liTarget].categories.length==0){
                $.ajaxSettings.async = false;
                $.getJSON("${(CPATH)}/data/refreshData?_req="+new Date(),function (data) {
                    var json = $.parseJSON(data.data);
                    var tempData = $.parseJSON(json.lineData);
                    lineData[liTarget] = tempData[liTarget];
                });
                data[liTarget].categories=[];
                data[liTarget].report=[];
                data[liTarget].business=[];
                data[liTarget].life=[];
                data[liTarget].comprehensive=[];
                data[liTarget].intelligent=[];
            }
            data[liTarget].categories.push(lineData[liTarget].categories.shift());
            data[liTarget].report.push(lineData[liTarget].report.shift());
            data[liTarget].business.push(lineData[liTarget].business.shift());
            data[liTarget].life.push(lineData[liTarget].life.shift());
            data[liTarget].comprehensive.push(lineData[liTarget].comprehensive.shift());
            data[liTarget].intelligent.push(lineData[liTarget].intelligent.shift());

            if (data[liTarget].categories.length>5){
                data[liTarget].categories.shift();
                data[liTarget].report.shift();
                data[liTarget].business.shift();
                data[liTarget].life.shift();
                data[liTarget].comprehensive.shift();
                data[liTarget].intelligent.shift();
            }

            setLineChart(data[liTarget]);
            setTimeout(refreshData,2000);
        }

        $('.consult-label li').on('click', function () {
            liTarget = $(this).data('day');
            dataTarget = data[liTarget];
            setLineChart(dataTarget);
        })
        function setLineChart(data) {
            echartLine.setOption({
                xAxis: {
                    data: data.categories
                },
                series: [
                    {
                        name: '汇报馆',
                        data: data.report
                    },
                    {
                        name: '商业馆',
                        data: data.business
                    },
                    {
                        name: '生活馆',
                        data: data.life
                    },
                    {
                        name: '综合馆',
                        data: data.comprehensive
                    },
                    {
                        name: '智能制造馆',
                        data: data.intelligent
                    }
                ]
            });
        }
    })

</script>
<!-- 场馆交易图 -->
<script>
    $(function () {
        var echartBar1 = echarts.init($('#echart-bar1')[0]);
        var option = {
            color: ['#01d2ff', '#009ec0', '#015769'],
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['需求量','订单数','交易额'],
                textStyle: {
                    color: '#7186a3',
                    fontSize: 10
                },
                right: 0,
                orient: 'vertical',
                itemWidth: 15,
                itemHeight: 6
            },
            textStyle: {
                color: '#7186a3'
            },
            grid: {
                top: '30%'
            },
            xAxis: {
                type: 'category',
                data: [],
            },
            yAxis: {
                type: 'value',
                splitNumber: 4,
                splitLine: {
                    show: false
                },
            },
            series: [
                {
                    name: '需求量',
                    type: 'bar',
                    barGap: 0,
                    data: []
                },
                {
                    name: '订单数',
                    type: 'bar',
                    barGap: 0,
                    data: []
                },
                {
                    name: '交易额',
                    type: 'bar',
                    barGap: 0,
                    data: []
                }
            ]
        }

        echartBar1.setOption(option);
        var data = bar1;

        refreshData();
        function refreshData() {
            data = bar1;
            setBar1Chart(data);
            setTimeout(refreshData,2000);
        }

        function setBar1Chart(data) {
            echartBar1.setOption({
                xAxis: {
                    data: data.categories
                },
                series: [
                    {
                        name: '需求量',
                        data: data.neednum
                    },
                    {
                        name: '订单数',
                        data: data.ordernum
                    },
                    {
                        name: '交易额',
                        data: data.tradenum
                    },
                ]
            });
        }
    })


</script>
<script>
    $(function () {
        var echartBar2 = echarts.init($('#echart-bar2')[0]);
        var option = {
            color: ['#ff0000', '#8e0a00', '#540600'],
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['需求量总数','现场交易额','线上交易额'],
                textStyle: {
                    color: '#7186a3',
                    fontSize: 10
                },
                orient: 'vertical',
                itemWidth: 15,
                itemHeight: 6,
                left: 0
            },
            textStyle: {
                color: '#7186a3'
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value',
                splitNumber: 4,
            },
            grid: {
                left: '30%',
                top: '30%'
            },
            series: [
                {
                    name: '需求量总数',
                    type: 'bar',
                    barGap: 0,
                    barWidth: 20,
                    data: []
                },
                {
                    name: '现场交易额',
                    type: 'bar',
                    barGap: 0,
                    barWidth: 20,
                    data: []
                },
                {
                    name: '线上交易额',
                    type: 'bar',
                    barGap: 0,
                    barWidth: 20,
                    data: []
                }
            ]
        }

        echartBar2.setOption(option);
        var data = bar2;

        refreshData();
        function refreshData() {
            data = bar2;
            setBar2Chart(data);
            setTimeout(refreshData,2000);
        }

        function setBar2Chart(data) {
            echartBar2.setOption({
                xAxis: {
                    data: data.categories
                },
                series: [
                    {
                        name: '需求量总数',
                        data: data.neednum
                    },
                    {
                        name: '现场交易额',
                        data: data.ordernum
                    },
                    {
                        name: '线上交易额',
                        data: data.tradenum
                    },
                ]
            });
        }
    })

    showLeftTime();
    var initializationTime=(new Date()).getTime();
    function showLeftTime()
    {
        //创建Date对象
        var today = new Date();
        //分别取出年、月、日、时、分、秒
        var year = today.getFullYear();
        var month = today.getMonth()+1;
        var day = today.getDate();
        var hours = today.getHours();
        var minutes = today.getMinutes();
        var seconds = today.getSeconds();
        //如果是单个数，则前面补0
        month  = month<10  ? "0"+month : month;
        day  = day <10  ? "0"+day : day;
        hours  = hours<10  ? "0"+hours : hours;
        minutes = minutes<10 ? "0"+minutes : minutes;
        seconds = seconds<10 ? "0"+seconds : seconds;

        //构建要输出的字符串
        var str = year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds;
        $("#nowTime").html(str);
        //一秒刷新一次显示时间
        var timeID=setTimeout(showLeftTime,1000);
    }

    // setTimeout(function(){window.location.reload()},5000);
</script>
</body>
</html>